import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

import '../../../../toolkit/typedef/function.dart';
import '../../../constants.dart';
import '../../../theme.dart';
import 'logic.dart';

class SetPayPasswordPage extends StatelessWidget {
  SetPayPasswordPage({Key? key}) : super(key: key);

  final SetPayPasswordLogic logic = Get.put(SetPayPasswordLogic());

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Scaffold(
        appBar: AppBar(
          title: const Text('修改登录密码'),
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back_ios,
              size: 16.w,
            ),
            onPressed: () {
              Get.back();
            },
          ),
        ),
        body: Container(
          padding: EdgeInsets.all(kSpaceMedium),
          margin: EdgeInsets.symmetric(
            vertical: kSpaceMedium,
            horizontal: kSpaceSmall,
          ),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(kRadiusMedium),
          ),
          child: Form(
            key: logic.formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ..._buildInputItem(
                  '新密码',
                  '请输入新密码',
                  logic.obscureNewPassword.value,
                  logic.newPasswordController,
                  () => logic.obscureNewPassword.value =
                      !logic.obscureNewPassword.value,
                ),
                SizedBox(height: kSpaceMedium),
                ..._buildInputItem(
                  '确认密码',
                  '请再次输入新密码',
                  logic.obscureConfirmPassword.value,
                  logic.confirmPasswordController,
                  () => logic.obscureConfirmPassword.value =
                      !logic.obscureConfirmPassword.value,
                ),
                SizedBox(height: kSpaceBig),
                SizedBox(
                  width: double.infinity,
                  height: 50.w,
                  child: FilledButton(
                    onPressed: () => logic.onSubmit(),
                    child: const Text('确认'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  List<Widget> _buildInputItem(
    String title,
    String hintText,
    bool obscureText,
    TextEditingController controller,
    ParamVoidCallback onClickObscure,
  ) {
    return [
      Text(
        title,
        style: TextStyle(
          fontSize: kFontSizeSmall,
          color: AppColor.colorFontBlack,
        ),
      ),
      SizedBox(height: 10.w),
      TextFormField(
        controller: controller,
        obscureText: obscureText,
        keyboardType: TextInputType.number,
        inputFormatters: [FilteringTextInputFormatter.digitsOnly],
        decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(
            vertical: 10.w,
            horizontal: 15.w,
          ),
          hintText: hintText,
          hintStyle: TextStyle(
            fontSize: kFontSizeSmall,
            color: AppColor.colorFontHint,
            height: 1.9,
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(kRadiusMedium),
            borderSide: const BorderSide(
              color: AppColor.colorBorderGrey,
              width: 0.5,
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(kRadiusMedium),
            borderSide: const BorderSide(
              color: AppColor.colorBorderGrey,
              width: 0.5,
            ),
          ),
          suffixIcon: IconButton(
            icon: SvgPicture.asset(
              obscureText
                  ? 'assets/icons/ic_eye_close.svg'
                  : 'assets/icons/ic_eye_open.svg',
              width: 20.w,
            ),
            onPressed: onClickObscure,
          ),
        ),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return hintText;
          }
          if (value.length != 6) {
            return '请输入6位数字密码';
          }
          if (title == '确认新密码') {
            if (value != logic.newPasswordController.text) {
              return '两次输入的密码不一致';
            }
          }
          return null;
        },
      ),
    ];
  }
}
